@charset "UTF-8";
/* CSS reset */
html {font-family: sans-serif; -ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{ margin: 0; padding: 0; }
fieldset,img{ border: 0;}
input:focus,textarea:focus,select:focus{outline: none}
button,input,optgroup,select,textarea {color: inherit;font: inherit;margin: 0;}
hr {-moz-box-sizing: content-box; box-sizing: content-box;height: 0;}
address,caption,cite,code,dfn,th,var,optgroup{ font-style: normal; font-weight: normal; }
h1,h2,h3,h4,h5,h6{ font-size: 100%; font-weight: normal; font-family: "Microsoft YaHei"; }
abbr,acronym{ border: 0; font-variant: normal; }
code,kbd,samp,tt{ font-size: 100%; }
input,button,textarea,select{ *font-size: 100%; border:1px solid #ccc;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {display: block;}
audio,canvas,progress,video {display: inline-block; vertical-align: baseline;}
body{ background: #fff; color:#333; font: 14px/1.5 'Microsoft YaHei','SimSun',Arial;}
ol,ul,li{ list-style: none; }
table{ border-collapse: collapse; border-spacing: 0; }
caption,th{ text-align: left; }
sup,sub{ font-size: 100%;vertical-align:baseline;line-height: 0;position: relative; }
small {font-size: 80%;}
:link, :visited, ins{ text-decoration: none; }
blockquote,q{quotes: none; }
blockquote:before, blockquote:after, q:before, q:after{ content: ''; content: none; }
*, *:before, *:after {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;-webkit-text-size-adjust: none;}
.clearfix:before,.clearfix:after {display: table;content: " ";}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}
.lf {float: left;}
.rf {float: right;}
.clear{ height:0;overflow:hidden; clear:both}
.hide{display:none;}.show{display:block;}
a {background-color: transparent;color:#ddd;}
a:active,a:hover,button,button:active{outline: 0;color:#fff;}
/*消灭所有 alert*/
#site-hint{position: fixed;top: 0;left: 0;right: 0;height: 40px;line-height: 40px;width: 100%;color: #fff;z-index: 99999999999;background: #6FBC60;text-align: center;font-size: 18px;display: none;}
#site-hint.win{background: #6FBC60;}
#site-hint.err{background: #F6888B;}
#close-hint{float: right;margin-right: 25px;text-decoration: none;font-size: 20px;color: #888;font-weight: bold;}
#close-hint:hover{color:#D45555;font-weight: border;}
/* 页面样式 */
body {
  background-color:#efeff4;
}
.chat-head{
  background:#3d3d3d;
  height: 38px;
  width: 100%;
  line-height:38px;
  color:#fff;
  padding:0 10px;
}
.chat-title{}
.online-count{
  background:#EFEFF4;
  font-size:12px;
  margin-top:10px;
  margin-left:10px;
  color:#666;
}
.send-btn{
  border:none;
  border-radius:30px;
  color:#8c8c8c;
  height:28px;
  width:68px;
  text-align:center;
  background:#fbfbfb;
  box-shadow:0 0 1px #000,0 2px 2px #eee;
}
.message {
  position: absolute;
  top: 38px;
  width: 100%;
  bottom: 50px;
  overflow-y: scroll;
}
.chat-box .service{
  margin:10px;
}
.chat-user {
  text-align:right;
  margin:10px;
}
.sys-system{
  text-align:center;
  color:#999;
  font-size:.8em;
  margin:10px 0;
}
.chat-bottom {
  display:-webkit-box;
  display:-ms-flexbox;
  display:-moz-box;
  position:fixed;
  bottom: 0;
  padding:8px 10px;
  width:100%;
  box-shadow:0 0 1px #000;
  background-color:#fff;
  height: 50px;
}
.chat-input{
  -webkit-box-flex:1;
  -ms-flex:1;
  -moz-box-flex:1;
  background-color:#fff;
   -webkit-box-flex:1;
  /*height: 28px;*/
  line-height:25px;
}
.text-input {
  margin:0;
  float: left;
  padding:0 6px;
  height:28px;
  width:93%;
  font-size:14px;
  background-color: #fbfbfb;
  border:none;
  -webkit-border-radius:15px;
  border-radius:15px;
  color:#000;
  box-shadow:0 0 1px #000;
}
.message-nr .uname{
  margin-right: 10px;
  line-height: 28px;
  height:28px;
  overflow: hidden;
  color:#1E90FF;
}
.message-nr .txt{
  background:#1E90FF;
  color:#fff;
  float:left;
  padding: 8px 10px;
  font-size: 12px;
  border-radius: 10px;
  max-width: 50%;
  line-height: 22px;
  margin:0 30px;
  position: relative;
}
.message-nr.chat-user .txt{
  background: #fff;
  float:right;
  color:#333;
  text-align: left;
}
.message-nr .txt:after{
  content: '';
  width: 0;
  height: 0;
  border-right: 10px solid #1E90FF;
  border-bottom: 20px solid transparent;
  border-top: 2px solid transparent;
  position: absolute;
  left: -7px;
  top: 5px;
}
.message-nr.chat-user .txt:after{
  border-left: 10px solid #fff;
  border-bottom: 20px solid transparent;
  border-top: 2px solid transparent;
  right: -7px;
  left: auto;
  border-right: 0;
}
.clear-cls{
  display: none;
  position: absolute;
  top: 210px;
  left: 762px;
  padding: 5px 30px;
  min-width: 100px;
  text-align: center;
  border-radius: 10px;
  cursor: pointer;
  background: rgb(255, 255, 255);
  font-size:12px;
}